<template>
	<div id="juese">
	<table border="1">
  	<tr>
  		<td colspan="4" style="text-align: left;height: 60px;line-height: 60px;">
  			<el-button type="primary" style="width: 100px;height: 40px;margin-top: 10px;margin-left: 5px;"
  			@click="show=true">新增角色</el-button>
  		</td>
  	</tr>
  	<tr style="height: 40px;line-height: 40px;">
  		<td>角色名称</td>
  		<td>角色描述</td>
  		<td>详情</td>
  		<td>操作</td>
  	</tr>
  	<tr style="height: 60px;" v-for="(item,key) in allRole">
  		<td>{{item.roleName}}</td>
  		<td>{{item.roleDesc}}</td>
  		<td></td>
  		<td>
  			<el-button type="primary" style="margin-top: 10px;"
  				@click="show1=true,role=item">编辑角色</el-button>
  			<el-button type="danger"style="margin-top: 10px;"
  				@click='removeRole(item._id)'>删除角色</el-button>
  		</td>
  	</tr>
  </table>
  <!--{{allRole}}-->
  <addnewjuese :show="show"></addnewjuese>
  <bianjijuese :show1="show1" :role="role"></bianjijuese>
  </div>
</template>

<script>
	import '../../css/table.css';
	import addnewjuese from './addnewjuese';
	import bianjijuese from './bianjijuese'
  export default {
    components:{addnewjuese,bianjijuese},
    data(){
    	return{
    		show:false,
    		show1:false,
    		role:{}
    	}
    },
    mounted(){
    	this.$store.dispatch("loadallroles")
    },
    computed:{
    	allRole(){
    		return this.$store.getters.allRole
    	}
    },
    methods:{
    	removeRole(id){
    		var action=()=>{
    			this.$http.post(this.$api.removeRole,{_id:id}).then((res)=>{
    				console.log(res)
    				this.$message({
    					message:"删除成功",
    					type:res.data.success?"success":'danger'
    				})
//  				if(res.data.success){
//  					
//  				}
					this.$store.dispatch("loadallroles",{api:this.$api.allRole})
    			})
    		}
    		this.operatorConfirm(action,"删除角色")
    	},
    }
  }
</script>

<style lang="scss">
	#juese{
		width: 100%;
		height: 100%;
		
	}
	
</style>